<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试axios</title>
    <script src= "../vue/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div>
            名称:{{info.name}}
        </div>
        <div>
            url:<a v-bind:href="info.url" target="_blank">{{info.url}}</a>
        </div>

    </div>

    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    info:{
                        name:"百度",
                        url:"https://www.baidu.com"
                    }
                }
            },
            //这个是钩子函数 渲染前执行
            mounted(){
                alert("hello")``
                axios.get('data.json')
                    .then(
                        //给data中的info赋值
                        //this.info 指代data中的info
                        //response为返回的数据
                        response => this.info=response
                    )
                //axios提交方式
               /* axios({
                    //提交方式
                    method: 'post',
                    //提交地址
                    url: '/user/12345',
                    //携带参数
                    data: {
                        firstName: 'Fred',
                        lastName: 'Flintstone'
                    }
                })
                    //成功响应
                    .then(function (response) {
                        console.log(response);
                    })
                    //失败回调函数
                    .catch(function (error) {
                        console.log(error);
                    });*/
            }

        })
    </script>
</body>
</html>